<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
    <style type="text/css">
        .swiper-container {
            width: 1200;
            height: 900px;
        }

        .rolling-pic{
            position:absolute;top:20px;left: 50px;z-index: 100;color: #000;
        }

        .loading{
            width: 100%;height: 100%;position: fixed;top:0;left: 200;background: #fff;z-index: 200
        }

        .loading .pic{width: 256px;height:256px;background: url(img/loading.gif);position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto; }
    </style>
</head>
<body>
    <div class="loading">
        <div class="pic">
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/yoona_1.jpg" onclick="Test(1)">
                <h2 class="rolling-pic">第一张</h2>
            </div>
            <div class="swiper-slide">
                <img src="img/yoona_2.jpeg" onclick="Test(2)">
                <h2 class="rolling-pic">第二张</h2>
            </div>
            <div class="swiper-slide">
                <img src="img/yoona_3.jpg" onclick="Test(3)">
                <h2 class="rolling-pic">第三张</h2>
            </div>
            <div class="swiper-slide">
                <img src="img/yoona_4.jpg" onclick="Test(4)">
                <h2 class="rolling-pic">第四张</h2>
            </div>
            <div class="swiper-slide">
                <img src="img/yoona_5.jpg" onclick="Test(5)">
                <h2 class="rolling-pic">第五张</h2>
            </div>

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
<!--         <div class="swiper-scrollbar"></div>
-->    </div>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
  document.onreadystatechange=function(){
    if(document.readyState=='complete'){
        $('.loading').fadeOut();
    }
  }
  var mySwiper = new Swiper ('.swiper-container', {
    autoplay:3000,
    loop: true,
    paginationClickable:true,
    preventClicksPropagation:true,
    zoom:true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',   
    // 如果需要滚动条
    // scrollbar: '.swiper-scrollbar',
    // onClick: function(swiper){//直接用插件的点击事件，点分页器和导航按钮也会触发事件

    //     window.location.href="test.html";

    // }
});

  function Test(id){
    alert(id);
    window.location.href="test.html";
}
</script>
</body>
</html>

